import '../../css/home.scss';

//router
import { Link } from 'react-router';

//redux
import { bindActionCreators } from 'redux';

import { connect , Provider } from 'react-redux';

import action from '../../redux/action/homeAction';

import store from '../../redux/store/homeStore';

//三方组件
import iScroll from 'iscroll/build/iscroll-probe';

import ReactIScroll from 'react-iscroll';

import ReactSwiper from '../../component/ReactSwiper';

import Search from '../../component/Search';

const Home = React.createClass({
    getInitialState(){
       return {
           scrollHeight:0
       }
    },
    componentDidMount(){
       this.setScrollHeight();
    },
    getDefaultProps: function() {
        return ({
            iscrollOptions: {
                mouseWheel: true,
                //scrollbars: true,
                probeType:3
            }
        });
    },
    setScrollHeight(){
       const header =  this.refs.header,
             footer =  this.refs.footer;
       const scrollHeight = window.innerHeight - header.clientHeight - footer.clientHeight;
       this.setState({
           scrollHeight:scrollHeight
       });
    },
    todos(){
       return this.props.todo;
    },
    actions(){
       return this.props.actions;
    },
    scroll:function(e){
      const maxY       = Math.abs(e.maxScrollY),
            moveY      = Math.abs(e.y >> 0),
            scrollEndY = ( maxY - moveY <= 0 ? 0 : maxY - moveY );
      if( scrollEndY <= 200 ) this.actions().getGifsList();
    },
    search(){
        var show = this.todos().searchShow;
        this.actions().openSearch(!show);
    },
    render(){
        var banners  = this.todos().banners,
            business = this.todos().business,
            gifs     = this.todos().gifs;
        console.log(this.todos().searchShow)
        return(
            <div className="home-page">
                <div className="header" ref="header">
                     <div className="sreach-box">
                       <div className="search-placeholder" onClick={this.search}>
                            <span>寻找宝贝店铺</span>
                       </div>
                     </div>
                </div>
                <div className="scroll-view" style={{ height:this.state.scrollHeight + 'px' }} ref="scroll">
                    <ReactIScroll iScroll={iScroll} options={this.props.iscrollOptions} onScroll={this.scroll}>
                        <div className="content">
                            <div className="banner">
                                <ReactSwiper>
                                    {banners.map(function(val,index){
                                        return (
                                            <div className="swiper-slide">
                                                <a><img src={val.img}/></a>
                                            </div>
                                        )
                                    })}
                                </ReactSwiper>
                            </div>
                            <div className="other-business">
                                <ul className="business">
                                    {business.map(function(val,index){
                                        return(
                                            <li className="list">
                                                <Link to={"#"}>
                                                    <div className={classname("logo",val.logo)}></div>
                                                    <div className="logo-name">{val.name}</div>
                                                </Link>
                                            </li>
                                        )
                                    })}
                                </ul>
                            </div>
                            <div className="tb-toutiao">
                                <div className="toutiao-ico"></div>
                                <div className="toutiao-tp">
                                    <span className="new-hot">最新</span>
                                    <span className="new-text">专属搭配，十二星座的民运</span>
                                </div>
                            </div>
                            <div className="line-big"></div>
                            <div className="gifs">
                                {gifs.map(function(val,index){
                                    return(
                                        <div className="gifs-list">
                                            <Link to={"detail/" + val.id }>
                                                <div className="gif-image">
                                                    <img src={getImageUrl(val.imgUrl)}/>
                                                </div>
                                                <div className="gif-info">
                                                    <div className="gif-text text-overflow-2">{val.text}</div>
                                                    <div className="gif-price">{"￥" + val.price}</div>
                                                </div>
                                            </Link>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    </ReactIScroll>
                </div>
                <div className="footer-bar" ref="footer"></div>
                <Search show={this.todos().searchShow} close={this.search}/>
            </div>
        )
    }
});


const IndexComp = connect(
    (state) => {
        return {
            //通过this.props.todos访问
            todo: state.todo
        }
    },
    (dispatch) => {
        return {
        //通过this.props.actions访问
            actions: bindActionCreators(action, dispatch)
        }
    }
)(Home);

module.exports = React.createClass({
    render: function () {
        return (
            <Provider store={store()}>
                <IndexComp router={this.props} />
            </Provider>
        )
    }
});



